<template>
	<view v-if="detailInfo" class="relative full-screen bg-default">
		<uni-nav-bar ref="navBar" class="absolute" style="z-index:10;" statusBar :border="false"
			backgroundColor="transparent" @clickLeft="goBack">
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-back.svg" />
			</template>
		</uni-nav-bar>
		<scroll-view class="relative flex-col" :scroll-top="scrollTop" :style="`height:calc(100% - ${detailInfo.remainStock===0 && !isLink ? 0 : 52}px - ${safeAreaBottom}px);`" scroll-y>
			<uni-swiper-dot mode="round" :info="detailInfo.goodsImages && detailInfo.goodsImages.length <= 1 ? [] : detailInfo.goodsImages" :current="swiperDotIndex" :dotsStyles="{bottom:8,selectedBackgroundColor:'white',selectedBorder:'white'}">
				<swiper class="swiper-box" autoplay circular :interval="2000" @change="swiperChange" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in detailInfo.goodsImages" :key="index">
						<view class="swiper-item">
							<video v-if="isVideoFile(item)" class="h-full" :src="item"></video>
							<image v-else class="h-full" mode="aspectFill" :src="item"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="mx-16">
				<view class="uni-bg-white radius-12 px-12 py-16 mt-16">
					<view class="text-color-regular fs-16 font-semibold leading-22 align-middle">{{detailInfo.goodsName}}</view>
					<view class="fs-14 flex item-center justify-between mt-8">
						<view class="color-primary"><text class="fs-21 font-bold">{{detailInfo.requiredPoints}}</text>积分</view>
						<view class="text-color-hint">已兑{{detailInfo.usedNum}}份</view>
					</view>
				</view>
				<view class="mt-8 mb-16 uni-bg-white radius-12 py-16 px-12">
					<view class="text-center fs-16 font-bold mb-16">商品详情</view>
					<view v-for="(item,i) in goodsDetail" :key="i" class="w-full">
						<view v-if="item.type===1" class="break-all text-color-regular fs-14 font-normal leading-22">
							<text v-if="item.content">{{item.content.replace(/\\n/g, '\n')}}</text>
						</view>
						<view v-else-if="item.type===2" style="font-size:0;">
							<image class="w-full" :show-menu-by-longpress="true" mode="widthFix" :src="item.content"></image>
						</view>
						<view v-else-if="item.type===3">
							<video :src="item.content"></video>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="w-full px-12 footer" :style="`padding-bottom:${safeAreaBottom}px;`">
			<view v-if="detailInfo.remainPoint >= detailInfo.requiredPoints" class="release-btn" @click="showPop(true)">立即兑换</view>
			<view v-else class="release-btn disabled">积分不足</view>
		</view>
	</view>
	<uni-popup :is-mask-click="false" ref="popup" type="center">
		<view>
			<view class="w-pop" style="background: #ffffff;">
				<view class="base-title text-center">积分兑换</view>
				<view class="mt-8 text-center mb-20">消耗<text class="color-primary">{{detailInfo.requiredPoints}}积分</text>兑换</view>
				<view class="goods-item flex item-center">
					<image v-if="detailInfo.goodsImages" :src="firstImage(detailInfo.goodsImages)"></image>
					<view class="flex py-10 px-12 c3 fs-14">
						<view class="three-lines-ellipsis">{{detailInfo.goodsName}}</view>
					</view>
				</view>
				<view class="flex item-center btn-box">
					<view class="submit-btn" @click="submit">确认兑换</view>
				</view>
			</view>
		</view>
		<view class="mt-20 flex justify-center">
			<image class="size-44" src="@/static/svg/icon-close.svg" @click.stop="showPop(false)"></image>
		</view>
	</uni-popup>
</template>

<script setup>
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import {ref,computed,watch} from 'vue'
	import {useUserStore} from '@/stores/modules/user.js'
	import {productDetailApi,userPointsAccountApi,exchangeApi} from '@/pagesF/api/index.js'
	import {numberFormat,formatBeginTime,isVideoFile} from '@/utils/index.js'

	const userStore = useUserStore()

	const navBar = ref(null)
	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets.bottom
	})
	const popup = ref()
	const goodsDetail = ref(null)
	
	const showPop = async (value) => {
		if (value) {
			popup.value && popup.value.open('center')
		} else {
			popup.value && popup.value.close()
		}
	}
	const goBack = () => {
		// 仅有一个页面时，返回首页
		if(getCurrentPages().length === 1) {
			uni.reLaunch({
				url: '/pages/home/home'
			})
			return
		}
		uni.navigateBack()
	}

	const swiperDotIndex = ref(0)
	const swiperChange = (e) => {
		swiperDotIndex.value = e.detail.current
	}
	const scrollTop = ref(0)

	const submit = async () => {
		exchangeApi({id: id.value}).then(res => {
			uni.showToast({
				icon: 'none',
				title: '兑换成功'
			})
			showPop(false)
			getDetail()
		})
	}

	const id = ref('')
	const detailInfo = ref(undefined)
	const getDetail = () => {
		productDetailApi({id: id.value}).then(res => {
			detailInfo.value = res
			goodsDetail.value = JSON.parse(res.details)
		}).catch(err => {
			uni.showToast({
				icon: 'none',
				title: err.message
			})
		})
	}

	const toRefresh = () => {
		getDetail()
	}
	const firstImage = (list) => {
		return list.find(item => !isVideoFile(item))
	}
	onShow(()=>{
		getDetail()
	})
	onLoad(query => {
		id.value = query.id
	})

</script>

<style lang="scss" scoped>
	:root {
		.uni-noticebar {
			margin-bottom: 0;
		}
	}
	.swiper-box {
		height: 250px;
		background-color: #000;
	}

	.swiper-item {
		height: 250px;
		position: relative;

		.notice-bar {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 36px;
		}
	}

	.swiper-stamp {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.60);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper-stamp-img {
		width: 160px;
		height: 160px;
	}
	
	.top{
		color: #FFF;
	}
	
	.w-pop {
		background: #fffff;
		border-radius: 8px;
		padding: 16px;
		width: 280px;
	}
	
	.base-title {
		font-size: 20px;
		font-weight: 600;
	}

	.goods-item{
		image{
			width: 80px;
			height: 80px;
			border-radius: 8px 0px 0px 8px;
			flex-shrink: 0;
		}
		border-radius: 12px 12px 12px 12px;
		background: #FFF0EA;
	}
	.footer{
		position: fixed;
		bottom: 0;
	}
	.btn-box {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		line-height: 40px;
	}
	.submit-btn {
		width: 100%;
		font-family: PingFang SC;
		font-size: 12px;
		text-align: center;
		color: #fff;
		background: #FA4543;
		border-radius: 4px;
		padding: 6px 0;
		&.disabled{
			color: #FA4543;
			background: #fff;
		}
	}
	.release-btn {
		height: 46px;
		border-radius: 8px;
		background: #FA4543;
		color: #ffffff;
		text-align: center;
		line-height: 46px;
		&.disabled{
			background: rgba(250,69,67,0.6);
		}
	}
</style>
